<template>
  <div class="site-wrapper">
    <div class="header clearfix">
      <el-button type="primary" :disabled="isObserver" size="small" @click="createDD(false)">新增</el-button>
      <el-button type="primary" size="small" :disabled="multipleSelection.length === 0 || isObserver" @click="delDD(false)">批量删除</el-button>
      <el-button type="primary" size="small" :disabled="multipleSelection.length === 0 || isObserver" @click="csDD">抄送</el-button>
      <el-button type="primary" size="small" :disabled="multipleSelection.length === 0 || isObserver" @click="shareDD">共享</el-button>
      <el-button type="primary" size="small" :disabled="multipleSelection.length === 0 || isObserver" @click="giveCustomer">转交</el-button>
      <!-- <el-button type="primary" size="small" :disabled="isObserver" @click="clickFileBtn">导入</el-button> -->
      <el-button type="primary" size="small" :disabled="multipleSelection.length === 0 || multipleSelection.length > 1 || isObserver" @click="exportExcel">导出订单详情</el-button>
      <el-button type="primary" size="small" :disabled="multipleSelection.length === 0 || multipleSelection.length > 1 || isObserver" @click="exportExcel2">导出订单合同</el-button>
      <!-- <el-button type="primary" size="small" :disabled="isObserver" @click="downloadTemplate">下载导入模板</el-button> -->
      <input type="file" style="display: none;" ref="uploadbtn" @change="uploadCustomer($event)">
      <div class="filter" @click="showFilter = true;"><img src="../../../../assets/livolobim/filter.png" alt="">搜索</div>
      <div class="mask" v-if="showFilter" @click="showFilter = false;"></div>
      <div class="filter-wrapper" v-if="showFilter">
        <span class="filter-arrow"></span>
        <span class="filter-white"></span>
        <div class="filter-header">搜索</div>
        <el-form :model="form" style="padding: 0 16px;" label-width="70px">
          <el-form-item label="信息">
            <el-input placeholder="客户名,订单号,拥有人" v-model="filterData.search"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="filterData.status" style="width: 100%;"  placeholder="请选择">
              <el-option v-for="item in ddzt" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button style="float:right;margin-right: 16px;" size="small" type="primary" @click="searchItem(true)">确定</el-button>
          <el-button style="float:right;margin-right: 16px;" size="small" @click="resetData">重置</el-button>
        </div>
      </div>
    </div>
    <div class="data-wrapper">
      <el-table :height="tableHeight" ref="dataTable2" :data="tableData" border style="width: 100%" @select="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" prop="orderNo" label="订单号" min-width="140"></el-table-column>
        <el-table-column align="center" prop="customerNo" label="客户编号" min-width="100"></el-table-column>
        <el-table-column align="center" prop="customerName" label="客户名称" min-width="100"></el-table-column>
        <el-table-column align="center" prop="countryName" label="国家" min-width="100"></el-table-column>
        <el-table-column align="center" prop="owner" label="拥有人" min-width="100"></el-table-column>
        <el-table-column align="center" prop="signDate" label="签订日期" min-width="100"></el-table-column>
        <el-table-column align="center" prop="deliveryDate" label="交货日期" min-width="100"></el-table-column>
        <el-table-column align="center" prop="goodsPrice" label="商品金额" min-width="100"></el-table-column>
        <el-table-column align="center" prop="realPrice" label="实际金额" min-width="100"></el-table-column>
        <el-table-column align="center" prop="remark" label="备注说明" min-width="100"></el-table-column>
        <el-table-column align="center" prop="remark" label="订单状态" min-width="100">
          <template slot-scope="scope">
            {{scope.row.status === 10 ? '完成': scope.row.status === 0 ? '拟定': scope.row.status === 1 ? '进行中': '取消'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="editDD(scope.row.orderNo, true)" type="text" size="small">查看</el-button>
            <el-button v-if="!isObserver && (scope.row.status === 0 || scope.row.status === 1)" @click="editDD(scope.row.orderNo, false)" type="text" size="small">编辑</el-button>
            <el-button v-if="!isObserver && scope.row.status !== -1" @click="delDD(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="page"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <el-dialog width="1300px" :visible.sync="showForm" :show-close="true" :close-on-click-modal="false">
        <div slot="title">
          <h2 style="text-align:center;margin-bottom:0;position:relative;">
            <span v-if="form.mainOrderNo !== ''" @click="backFather" style="position: absolute;top: 4px;left: 40px;font-size: 14px;font-weight: normal;color: #409EFF;cursor: pointer;"><i class="el-icon-arrow-left"></i>返回父订单</span>
            {{form.id? isCheck? '查看': '编辑': '创建'}}{{form.mainOrderNo !== '' ? '子': ''}}订单
          </h2>
        </div>
        <div class="form-wrapper" style="padding: 0 20px;">
          <el-form ref="form" :model="form" label-width="130px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="订单编号：">
                  <el-input disabled v-model="form.orderNo" placeholder="订单创建后自动生成"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="拥有人：">
                  <div class="select-btn" v-if="form.ownerId">
                    <span>{{form.owner}}</span>
                    <div v-if="!isCheck" class="del" @click="delMember">移除</div>
                  </div>
                  <div v-if="!form.ownerId" @click="selectDingUsers()" class="select-btn">请选择</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="报价时间：">
                  <span slot="label">报价时间<span style="color: red;">*</span>：</span>
                  <el-date-picker :disabled="isCheck" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.quoteDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="客户名称：">
                  <span slot="label">客户名称<span style="color: red;">*</span>：</span>
                  <el-select
                    style="width: 100%;"
                    v-model="form.customerId"
                    filterable
                    :disabled="isCheck || form.mainOrderNo !== ''"
                    remote
                    reserve-keyword
                    @change="changeCustomer"
                    placeholder="请输入客户名称、编号(最少输入2个字母)"
                    :remote-method="remoteMethod"
                    :loading="loading">
                    <el-option
                      v-for="item in custormerList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="客户编号：">
                  <el-input  disabled v-model="form.customerNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="签订时间：">
                  <el-date-picker :disabled="isCheck" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.signDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="结算币种：">
                  <span slot="label">结算币种<span style="color: red;">*</span>：</span>
                  <el-select :disabled="isCheck || form.mainOrderNo !== ''" style="width: 100%;" :filterable="true" v-model="form.currency" placeholder="请选择币种">
                    <el-option v-for="item in currencyList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="商品金额：">
                  <el-input placeholder="由商品清单自动生成" @input="changeValue(form, 'goodsPrice')" disabled v-model="form.goodsPrice"></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="折后总金额：">
                  <el-input placeholder="由商品清单自动生成" :disabled="!form.fromLivolo || isCheck" @input="changeValue(form, 'bidPrice')" v-model="form.bidPrice"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="物流费用：">
                  <el-input :disabled="isCheck" @input="changeValue(form, 'freightPrice', true)" v-model="form.freightPrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="订单实际金额：">
                  <span slot="label">订单实际金额<span style="color: red;">*</span>：</span>
                  <el-input :disabled="isCheck" @input="changeValue(form, 'realPrice')" v-model="form.realPrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="报价收件方式：">
                  <span slot="label">报价收件方式<span style="color: red;">*</span>：</span>
                  <!-- <el-input :disabled="isCheck" v-model="form.priceRecMail" placeholder="如：邮箱:livolo@livolo.com"></el-input> -->
                  <el-select :disabled="isCheck" style="width: 100%;" v-model="form.priceRecMail" placeholder="请选择收件方式">
                    <el-option v-for="item in accountList" :key="item.id" :label="item.contactTypeName + ':' + item.content" :value="item.contactTypeName + ':' + item.content"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="价格条款：">
                  <el-select :disabled="isCheck" style="width: 100%;" v-model="form.priceTerms" placeholder="请选择价格条款">
                    <el-option v-for="item in jgtk" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="交货日期：">
                  <el-date-picker :disabled="isCheck" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.deliveryDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="font-weight: bold;" label="收货地址：">
                  <el-input :disabled="isCheck" v-model="form.addrId"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item style="font-weight: bold;" label="备注：">
                  <el-input :disabled="isCheck" type="textarea" :rows="3" placeholder="请输入备注信息" v-model="form.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24" style="position:relative;">
                <div @click="delSaleMany" v-if="(!isCheck || activeName === 'third') && (form.status === 0 || form.status === 1) && activeName === 'first'" style="position:absolute;right:30px;top: 15px;color: #409EFF;cursor:pointer;z-index: 2;">删除</div>
                <div @click="openAddForm" v-if="(!isCheck || activeName === 'third') && (form.status === 0 || form.status === 1) && activeName !== 'fourth'" style="position:absolute;right:80px;top: 15px;color: #409EFF;cursor:pointer;z-index: 2;">新增</div>
                <div @click="setCacheNum" v-if="!isCheck && (form.status === 0 || form.status === 1) && activeName === 'first'" style="position:absolute;right:130px;top: 15px;color: #409EFF;cursor:pointer;z-index: 2;">设置数量</div>
                <div @click="setCacheDis" v-if="!isCheck && (form.status === 0 || form.status === 1) && activeName === 'first'" style="position:absolute;right:210px;top: 15px;color: #409EFF;cursor:pointer;z-index: 2;">设置折扣</div>
                <div @click="setSeq" v-if="!isCheck && (form.status === 0 || form.status === 1) && activeName === 'first'" style="position:absolute;right:290px;top: 15px;color: #409EFF;cursor:pointer;z-index: 2;">设置序号</div>
                <el-tabs v-model="activeName" style="padding-left: 40px;padding-bottom: 30px;">
                  <el-tab-pane label="商品清单" name="first">
                    <ElBigdataTable ref="dataTable3" :height="300" :row-height="38" :data="form.detailList" border style="width: 100%;" @selection-change="selectGoodCacheHandle">
                      <el-table-column align="center" type="selection" width="55"></el-table-column>
                      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                      <el-table-column prop="goodsNo" align="center" label="商品编号" width="180"></el-table-column>
                      <el-table-column :show-overflow-tooltip="true" prop="enName" align="center" label="英文名称" width="240"></el-table-column>
                      <el-table-column prop="weight" align="center" label="重量" width="70"></el-table-column>
                      <el-table-column prop="saleNum" align="center" label="销售数量" width="100">
                        <template slot-scope="scope">
                          <span v-if="!scope.row.isEdit">{{scope.row.saleNum}}</span>
                          <el-input @change="computedPrice" v-if="scope.row.isEdit" @input="changeValue(scope.row, 'saleNum', true)" v-model="scope.row.saleNum"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="unitPrice" align="center" label="销售单价" width="80"></el-table-column>
                      <el-table-column prop="taxNo" align="center" label="折扣" width="120">
                        <template slot-scope="scope">
                          <span v-if="!scope.row.isEdit">{{scope.row.discount}}</span>
                          <el-input @change="computedPrice" style="width:80px;" v-if="scope.row.isEdit" @input="changeValue(scope.row, 'discount', true)" v-model="scope.row.discount"></el-input>%
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="折后单价" width="80">
                        <template slot-scope="scope">
                          <span>{{Math.round(scope.row.discount * scope.row.unitPrice) / 100}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="折后总价" width="80">
                        <template slot-scope="scope">
                          <span>{{Math.round(scope.row.discount * scope.row.unitPrice * scope.row.saleNum) / 100}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="总毛重" width="80">
                        <template slot-scope="scope">
                          <span>{{(Math.round(scope.row.saleNum * parseFloat(scope.row.weight) * 100) / 100) || 0}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="taxNo" align="center" label="生产说明" width="100">
                        <template slot-scope="scope">
                          <span v-if="!scope.row.isEdit">{{scope.row.prodDesc}}</span>
                          <el-input v-if="scope.row.isEdit" v-model="scope.row.prodDesc"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="taxNo" align="center" label="包装说明" width="100">
                        <template slot-scope="scope">
                          <span v-if="!scope.row.isEdit">{{scope.row.packDesc}}</span>
                          <el-input v-if="scope.row.isEdit" v-model="scope.row.packDesc"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column v-if="!isCheck" label="操作" width="100" align="center">
                        <template slot-scope="scope">
                          <el-button v-if="!scope.row.isEdit" @click="scope.row.isEdit = true;" type="text" size="small">编辑</el-button>
                           <el-button @click="delSale(scope.row, scope.$index)" type="text" size="small">删除</el-button>
                        </template>
                      </el-table-column>
                    </ElBigdataTable>
                  </el-tab-pane>
                  <el-tab-pane label="款项清单" name="second">
                    <el-table :data="form.billList" border style="width: 100%;">
                      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                      <el-table-column prop="contactTypeName" align="center" label="款项性质" min-width="100">
                        <template slot-scope="scope">
                          <el-select :disabled="!scope.row.isEdit" style="width: 100%;" v-model="scope.row.billType" placeholder="请选择">
                            <el-option v-for="item in lkxz" :key="item.name" :label="item.name" :value="item.name"></el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" align="center" label="款项比例" min-width="100">
                        <template slot-scope="scope">
                          <span>{{scope.row.billPercent !== '' ? parseInt(scope.row.billPercent) + '%': ''}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" align="center" label="金额" min-width="100">
                        <template slot-scope="scope">
                          <span v-if="!scope.row.isEdit">{{scope.row.billAmount}}</span>
                          <el-input v-if="scope.row.isEdit" @input="changeValue(scope.row, 'billAmount')" v-model="scope.row.billAmount"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" align="center" label="备注" min-width="100">
                        <template slot-scope="scope">
                          <span v-if="!scope.row.isEdit">{{scope.row.remark}}</span>
                          <el-input v-if="scope.row.isEdit" v-model="scope.row.remark"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contactTypeName" align="center" label="汇款方式" min-width="100">
                        <template slot-scope="scope">
                          <el-select :disabled="!scope.row.isEdit" style="width: 100%;" v-model="scope.row.remitType" placeholder="请选择">
                            <el-option v-for="item in hkfs" :key="item.name" :label="item.name" :value="item.name"></el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" align="center" label="到账时间" min-width="120">
                        <template slot-scope="scope">
                          <el-date-picker :disabled="!scope.row.isEdit" type="date" placeholder="选择日期" v-model="scope.row.billDate" style="width: 100%;"></el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column prop="content" align="center" label="汇款情况" min-width="100">
                        <template slot-scope="scope">
                          <el-select :disabled="!scope.row.isEdit" style="width: 100%;" v-model="scope.row.billStatus" placeholder="请选择">
                            <el-option v-for="item in hkqk" :key="item.id" :label="item.name" :value="item.id"></el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column v-if="!isCheck" label="操作" min-width="100" align="center">
                        <template slot-scope="scope">
                          <el-button v-if="!scope.row.isEdit" @click="scope.row.isEdit = true;" type="text" size="small">编辑</el-button>
                          <el-button @click="delSale(scope.row, scope.$index)" type="text" size="small">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane v-if="form.id && form.mainOrderNo === ''" label="子订单列表" name="third">
                    <el-table :data="form.childrenOrder" border style="width: 100%;">
                      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                      <el-table-column align="center" prop="signDate" label="签订日期" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="deliveryDate" label="交货日期" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="goodsPrice" label="商品金额" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="realPrice" label="实际金额" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="remark" label="备注说明" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="remark" label="订单状态" min-width="100">
                        <template slot-scope="scope">
                          {{scope.row.status === 10 ? '完成': scope.row.status === 0 ? '拟定': scope.row.status === 1 ? '进行中': '取消'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" min-width="100" align="center">
                        <template slot-scope="scope">
                          <el-button @click="editDD(scope.row.orderNo, true)" type="text" size="small">查看</el-button>
                          <el-button v-if="!isObserver && (form.status === 0 || form.status === 1) && (scope.row.status === 0 || scope.row.status === 1)" @click="editDD(scope.row.orderNo, false)" type="text" size="small">编辑</el-button>
                          <el-button v-if="!isObserver && (form.status === 0 || form.status === 1) && scope.row.status !== -1" @click="delDD(scope.row.id)" type="text" size="small">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane v-if="form.id" label="操作日志" name="fourth">
                    <el-table :data="form.logList" border style="width: 100%;">
                      <el-table-column align="center" prop="opDate" label="操作日期" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="opUserName" label="操作人" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="content" label="操作内容" min-width="400"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button v-if="form.mainOrderNo === ''" style="float:right;" size="small" @click="showForm = false">关闭</el-button>
              <el-button v-if="form.mainOrderNo !== ''" style="float:right;" size="small" @click="backFather">关闭</el-button>
              <el-button v-if="!isCheck" style="float:right;margin-right: 10px;margin-left: 0;" size="small" type="primary" @click="saveForm">保存</el-button>
              <el-button v-if="(isManager || (form.status === 0 || form.status === 1)) && form.id" style="float:right;margin-right: 10px;" size="small" type="primary" @click="openHandle">修改订单状态</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <el-dialog title="选择产品" :visible.sync="showGoods" width="1300px" :close-on-click-modal="false">
        <div class="tree-header">
          <div class="left-header">产品分类</div>
          <div class="right-header">产品列表</div>
        </div>
        <div class="tree-wrapper">
          <div class="good-class">
            <el-tree :data="treeData" icon-class="el-icon-arrow-right" :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
          <div class="good-list">
            <div style="padding-left: 10px;margin-bottom: 10px;">
              <el-input placeholder="编号,型号,中文,英文" style="width: 200px;" v-model="filterData2.search"></el-input>
              <el-button type="primary" @click="getTargetGood">搜索</el-button>
            </div>
            <ElBigdataTable :height="270" :row-height="38" ref="dataTable" :data="goods" border style="width: 100%" @select-all="selectAllGoodHandle" @select="selectGoodHandle">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" align="center" prop="sku" label="商品编号" width="200"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" align="center" prop="newSku" label="V2编码" width="200"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" align="center" prop="modelNum" label="商品型号" width="150"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" align="center" prop="description" label="描述" min-width="160"></el-table-column>
              <el-table-column align="center" prop="specification" label="商品规格" min-width="100"></el-table-column>
              <el-table-column align="center" prop="color" label="颜色" min-width="80"></el-table-column>
              <el-table-column align="center" prop="weight" label="毛重" min-width="100"></el-table-column>
              <el-table-column align="center" prop="price" label="销售单价" min-width="80"></el-table-column>
            </ElBigdataTable>
            <p class="clearfix">已选产品 <span style="float:right;color: #409EFF;cursor:pointer;margin-right: 10px;" @click="delCacheGood">删除</span> <span style="float:right;color: #409EFF;cursor:pointer;margin-right:10px;" @click="setCacheDis">设置折扣</span></p>
            <ElBigdataTable :height="270" :row-height="38" :data="selectGoods" border style="width: 100%" @selection-change="selectGoodCacheHandle">
              <el-table-column align="center" type="selection" width="55"></el-table-column>
              <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="goodsNo" align="center" label="商品编号" width="200"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="enName" align="center" label="英文名称" width="200"></el-table-column>
              <el-table-column prop="saleNum" align="center" label="销售数量" min-width="100">
                <template slot-scope="scope">
                  <el-input @change="computedPrice" @input="changeValue(scope.row, 'saleNum')" v-model="scope.row.saleNum"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="unitPrice" align="center" label="销售单价" min-width="100"></el-table-column>
              <el-table-column prop="taxNo" align="center" label="折扣" min-width="120">
                <template slot-scope="scope">
                  <el-input @change="computedPrice" style="width:70px;" @input="changeValue(scope.row, 'discount')" v-model="scope.row.discount"></el-input>%
                </template>
              </el-table-column>
              <el-table-column align="center" label="折后价格" min-width="100">
                <template slot-scope="scope">
                  <span>{{Math.round(scope.row.discount * scope.row.unitPrice) / 100}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="总毛重" min-width="100">
                <template slot-scope="scope">
                  <span>{{(Math.round(scope.row.saleNum * parseFloat(scope.row.weight) * 100) / 100) || 0}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="taxNo" align="center" label="生产说明" min-width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.prodDesc"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="taxNo" align="center" label="包装说明" min-width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.packDesc"></el-input>
                </template>
              </el-table-column>
            </ElBigdataTable>
            <div style="padding-left:10px;line-height:26px;overflow:hidden;">已选产品总件数：{{selectGoods.length}}</div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showGoods = false">取 消</el-button>
          <el-button type="primary" @click="saveSelect">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改折扣" :visible.sync="showDiscount" width="600px">
        <el-form :model="handleForm" style="padding-right:100px;">
          <el-form-item label="折扣：" label-width="120px">
            <el-input placeholder="请输入折扣" v-model="discount"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showDiscount = false">取 消</el-button>
          <el-button type="primary" @click="setDiscount">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="批量设置数量" :visible.sync="showSetNum" width="600px">
        <el-form :model="handleForm" style="padding-right:100px;">
          <el-form-item label="产品数量：" label-width="120px">
            <el-input type="textarea" :rows="5" placeholder="请根据要求输入数量,将逐行填充到选中的产品中" v-model="numContent"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showSetNum = false">取 消</el-button>
          <el-button type="primary" @click="setNum">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改订单状态" :visible.sync="showHandle" width="600px">
        <el-form :model="handleForm" style="padding-right:100px;">
          <el-form-item label="订单状态：" label-width="120px">
            <el-select style="width: 100%;" v-model="handleForm.status" placeholder="请选择">
              <el-option v-for="item in ddzt" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="修改说明：" label-width="120px">
            <el-input type="textarea" :rows="5" placeholder="请输入修改说明" v-model="handleForm.statusChangeExplain"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showHandle = false">取 消</el-button>
          <el-button type="primary" @click="dealWithTask">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="设置商品序号" :visible.sync="showSeq" width="600px">
        <el-form style="padding-right:100px;">
          <el-form-item label="目标序号：" label-width="150px">
            <el-input v-model="wantIdx"></el-input>
          </el-form-item>
          <div style="padding-left:67px;">插入的方式为：输入对应商品的序号，选中的商品将会移动到对应商品的下方,可选择多条。</div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showSeq = false">取 消</el-button>
          <el-button type="primary" @click="openSeq">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import formUtil from "@/utils/formUtil";
import {dateUtil} from '@/utils/dateUtil'

export default {
  data() {
    return {
      showSeq: false,
      wantIdx: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      handleForm: {
        id: '',
        status: '',
        statusChangeExplain: ''
      },
      numContent: '',
      showSetNum: false,
      showHandle: false,
      showDiscount: false,
      childData: [],
      showGoods: false,
      activeName: 'first',
      showPeopleBtn: false,
      showFilter: false,
      loading:false,
      showForm: false,
      tableHeight: window.tableHeight,
      tableData: [],
      page:1,
      pageSize: 15,
      totalPage: 1,
      discount: 100,
      hkqk: [{
        name: '未汇款',
        id: 0
      },{
        name: '已汇款',
        id: 10
      }],
      ddzt: [{
        name: '取消',
        id: -1
      },{
        name: '拟定',
        id: 0
      },{
        name: '进行中',
        id: 1
      },{
        name: '完成',
        id: 10
      }],
      form: {
        id: '',
        orderNo: '',
        owner: '',
        freightPrice: '',
        ownerId: '',
        quoteDate: '',
        signDate: '',
        customerNo: '',
        customerId: '',
        customerName: '',
        currency: '',
        goodsPrice: '',
        bidPrice: '',
        priceTerms: '',
        priceRecMail: '',
        deliveryDate: '',
        remark: '',
        mainOrderNo: '',
        detailList:[],
        billList:[],
        addrId: ''
      },
      formVerify: {
        quoteDate: '请选择报价时间',
        customerId: '请输入客户名称',
        currency: '请选择结算币种',
        realPrice: '请输入订单实际金额',
        priceRecMail: '请输入报价收件邮箱'
      },
      custormerList: [],
      filterData: {
        search: '',
        status: ''
      },
      filterData2: {
        search: ''
      },
      multipleSelection: [],
      currencyList: [],
      treeData: [],
      goods: [],
      lkxz: [],
      jgtk: [],
      hkfs: [],
      isCheck: false,
      currentMainId: '',
      isCheckCache: false,
      selectGoods: [],
      selectGoodCache: [],
      isInitSelect: false,
      accountList: []
    }
  },
  computed: {
    isObserver() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1289086254290432001')
    },
    isManager() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1289086160891670529')
    }
  },
  mixins: [dingMixin],
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = document.documentElement['clientHeight'] - 170;
    })
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 170
    }

    this.getALLDict();
    this.searchItem(true);
    if(this.$route.params.orderNo) this.editDD(this.$route.params.orderNo, true);
  },
  methods: {
    setSeq() {
      if(this.selectGoodCache.length === 0) return formUtil.submitError('请选择需要移动的产品');
      this.showSeq = true;
      this.wantIdx = '';
    },
    openSeq() {
      if(isNaN(this.wantIdx)) return formUtil.submitError('请输入大于等于0的序号');
      if(this.wantIdx > this.form.detailList.length) return formUtil.submitError('已超出所有的序号');
      this.selectGoodCache.forEach((item) => item.sort = true);
      let filterData = this.form.detailList.filter((item) => !item.sort);
      if(this.wantIdx === '0') {
        filterData.splice(0,0, ...this.selectGoodCache);
      }else {
        if(this.form.detailList[this.wantIdx-1].sort) {
          this.selectGoodCache.forEach((item) => delete item.sort);
          return formUtil.submitError('移入的需要不能是已选择的序号');
        }
        let id = this.form.detailList[this.wantIdx-1].goodsId;
        let nextIdx = this.form.detailList.findIndex((item) => item.goodsId === id);
        filterData.splice(nextIdx + 1,0, ...this.selectGoodCache);
      }
      this.form.detailList = filterData;
      this.selectGoodCache.forEach((item) => delete item.sort);
      this.showSeq = false;
      this.$refs.dataTable3.clearSelection();
      this.selectGoodCache = []
    },
    selectGoodHandle(arr, row) {
      let idx = this.selectGoods.findIndex((select) => {
        return select.goodsId === row.id
      });
      if(idx > -1) {
        this.selectGoods.splice(idx, 1)
      }else {
        this.addToCache(row);
      }
    },
    selectAllGoodHandle(arr) {
      arr.forEach((row) => {
        let idx = this.selectGoods.findIndex((select) => {
          return select.goodsId === row.id
        });
        if(idx > -1) {
          // this.selectGoods.splice(idx, 1)
        }else {
          this.addToCache(row);
        }
      })

      if(arr.length === 0) this.selectGoods = []
    },
    setCacheDis() {
      this.showDiscount = true;
      this.discount = 100;
    },
    setCacheNum() {
      this.showSetNum = true;
      this.numContent = '';
    },
    setDiscount() {
      if(isNaN(this.discount)) return formUtil.submitError('折扣必须为数字');
      this.selectGoodCache.forEach((item) => {
        item.discount = this.discount;
      })
      this.showDiscount = false;
    },
    setNum() {
      let numArr = this.numContent.split('\n');
      this.selectGoodCache.forEach((item, idx) => {
        if(!isNaN(numArr[idx])) item.saleNum = parseInt(numArr[idx]);
      })
      this.showSetNum = false;
    },
    selectGoodCacheHandle(val) {
      this.selectGoodCache = val;
    },
    saveSelect() {
      this.form.detailList.push(...this.selectGoods);
      this.showGoods = false;
      this.selectGoods = [];
      this.selectGoodCache = [];
      this.computedPrice();
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.dataTable3.$el.children[2].scrollTop = 0;
          this.$refs.dataTable3.$el.children[1].height = 0;
        }, 200)
      })
    },
    delCacheGood() {
      this.selectGoodCache.forEach((item) => {
        let idx = this.selectGoods.findIndex((good) => good.goodsId === item.goodsId);
        this.selectGoods.splice(idx, 1)
      })
    },
    changeValue(target, attr, needComputed) {
      target[attr] = target[attr].replace(/[^\d.]/g,'');
      if(needComputed) this.computedPrice()
    },
    openHandle() {
      this.showHandle = true;
      this.handleForm.id = this.form.id;
      this.handleForm.status = this.form.status;
      this.handleForm.statusChangeExplain = '';
    },
    async dealWithTask() {
      if(!await this.$httpN.postB('crm/order/updateStatus', this.handleForm)) return;
      formUtil.submitSuccess('修改成功');
      this.searchItem(true);
      if(this.form.mainOrderNo) {
        this.isCheck = this.isCheckCache;
        this.editDD(this.form.mainOrderNo, this.isCheck, true);
        this.showHandle = false;
      }else {
        this.showForm = false;
        this.showHandle = false;
      }
    },
    computedPrice() {
      let goodsPrice = 0;
      let bidPrice = 0;
      this.form.detailList.forEach((item) => {
        goodsPrice += (Math.round(item.unitPrice * item.saleNum * 100) / 100);
        bidPrice += (Math.round(item.unitPrice * item.discount* item.saleNum) / 100);
      })
      this.form.goodsPrice = Math.round(goodsPrice * 100) / 100;
      this.form.bidPrice = Math.round(bidPrice * 100) / 100;
      this.form.realPrice = Math.round((bidPrice + parseFloat(this.form.freightPrice)) * 100) / 100;
    },
    backFather() {
      this.isCheck = this.isCheckCache;
      this.editDD(this.form.mainOrderNo, this.isCheck, true);
    },
    clearOther() {
      this.form.bidPrice = this.form.bidPrice.replace(/[^\d.]/g,'')
    },
    async shareDD() {
      this.complexPicker(20, [], []).then(
        async data => {
          let shareIds = data.map(item => item.emplId);
          let shareNames = data.map(item => item.name);
          let ids = this.multipleSelection.map(item => item.id);
          if(!await this.$httpN.postB('crm/order/share', {ids: ids, shareUsers: shareIds.join(','), shareUsersName: shareNames.join(',')}, false)) return;
          formUtil.submitSuccess('共享成功');
        }
      );
    },
    clickFileBtn() {
      this.$refs.uploadbtn.click();
    },
    async giveCustomer() {
      this.complexPicker(1, [], []).then(
        async data => {
          let ids = this.multipleSelection.map(item => item.id);
          if(!await this.$httpN.postB('crm/order/give', {ids, ownerId: data[0].emplId, owner: data[0].name})) return;
          formUtil.submitSuccess('转交成功');
          this.searchItem();
        }
      );
    },
    uploadCustomer(e) {
      let file = e.target.files[0];
      var formData = new FormData();
      formData.append("file", file);
      formData.append("name", 'file');
      this.$httpN.upload('crm/order/upload', formData).then((res) => {
        if(res.status === 200 && res.data.code === 0) {
          formUtil.submitSuccess('上传成功')
          this.searchItem(true);
        }else{
          this.$message.error('上传文件出错,请重试')
        }
      })
    },
    async changeCustomer(val) {
      this.custormerList.forEach((item) => {
        if(item.id === val) {
          this.form.customerNo = item.code;
          this.form.customerName = item.name;
        };
      })
      let form = await this.$httpN.get('crm/customer/info/' + val);
      this.accountList = form.contactList;
      this.form.priceRecMail = '';
    },
    handleNodeClick(node) {
      this.categoryId = node.id;
      this.searchGoods(true);
    },
    addToCache(good) {
      this.selectGoods.push({
        goodsId: good.id,
        goodsNo: good.sku,
        modelNo: good.modelNum,
        cnName: good.nameCn,
        enName: good.name,
        enSpecs: good.specification,
        saleNum: 1,
        unitPrice: good.price,
        discount: 100,
        unitPriceDiscount: '',
        weight: good.weight,
        prodDesc: '',
        packDesc: '',
        remark: '',
        isEdit: false,
        orderNo: this.form.id? this.form.orderNo: ''
      })
    },
    async getTargetGood() {
      if(this.filterData2.search === '') return this.searchGoods(true);
      let data = await this.$httpN.postB('crm/product/list',{
        search: this.filterData2.search,
        categoryId: this.categoryId,
        page: 1,
        limit: 999
      })
      this.goods = data.list;
      this.isInitSelect = true;
      this.$nextTick(() => {
        this.goods.forEach(row => {
          this.selectGoods.forEach((good) => {
            if(good.goodsId === row.id) this.$refs.dataTable.toggleRowSelection(row,true);
          })
        })
        this.isInitSelect = false;
      })
    },
    async searchGoods(init) {
      let data = await this.$httpN.postB('crm/product/list',{
        search: '',
        categoryId: this.categoryId,
        page: 1,
        limit: 999
      })
      this.goods = data.list;
      this.$nextTick(() => {
        this.goods.forEach(row => {
          this.selectGoods.forEach((good) => {
            if(good.goodsId === row.id) this.$refs.dataTable.toggleRowSelection(row,true);
          })
        })
        this.isInitSelect = false;

        setTimeout(() => {
          this.$refs.dataTable.$el.children[2].scrollTop = 0;
          this.$refs.dataTable.$el.children[1].height = 0;
        }, 200)
      })
    },
    async csDD() {
      this.complexPicker(20, [], []).then(
        async data => {
          let shareIds = data.map(item => item.emplId);
          let ids = this.multipleSelection.map(item => item.id);
          if(!await this.$httpN.postB('crm/order/cc', {orderId: ids, toUserIds: shareIds.join(',')}, false)) return;
          formUtil.submitSuccess('抄送成功');
        }
      );
    },
    async editDD(orderNo, isCheck, showChild = false) {
      let form = await this.$httpN.get('crm/order/info/' + orderNo);
      form.billList.forEach((item) => {item.isEdit = false;})
      form.detailList.forEach((item) => {item.isEdit = false;})
      this.form = form;
      if(this.form.customerName) this.custormerList = [{name: this.form.customerName, id: this.form.customerId, code: this.form.customerNo}];
      this.showForm = true;
      this.form.realPrice = this.form.realPrice === ''? 0: this.form.realPrice;
      this.activeName = 'first';
      if(showChild) this.activeName = 'third';
      if(form.mainOrderNo === '') {
        this.currentMainId = this.form.orderNo;
        this.isCheckCache = this.isCheck
      }
      this.selectGoods = [];
      this.selectGoodCache = [];
      let result = await this.$httpN.get('crm/customer/info/' + this.form.customerId);
      this.accountList = result.contactList;
      this.isCheck = isCheck;
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.dataTable.$el.children[2].scrollTop = 0;
          this.$refs.dataTable.$el.children[1].height = 0;
        }, 200)
      })
    },
    async delDD(id) {
      let ids = id ? [id]: this.multipleSelection.map(item => item.id);
      formUtil.submitConfirm('您确定要删除订单吗？', async ()=> {
        if(!await this.$httpN.postB('crm/order/delete', ids, false)) return;
        formUtil.submitSuccess('删除成功');
        this.searchItem(true);
        if(this.showForm) this.editDD(this.form.orderNo, this.isCheck, true);
      })
    },
    async openAddForm() {
      this.$refs.dataTable3.clearSelection()
      if(this.activeName === 'first') {
        this.showGoods = true;
        this.filterData2.search = '';
        this.selectGoods = [];
        this.selectGoodCache = [];
        this.goods = [];
      }else if(this.activeName === 'second'){
        this.form.billList.push({
          orderNo: this.form.id? this.form.orderNo: '',
          billType: '',
          billPercent: '',
          billAmount: 0,
          remark: '',
          currency: '',
          billDate: '',
          remitType: '',
          billStatus: '',
          isEdit: true
        })
      }else if(this.activeName === 'third'){
        let cache = {
          currency: this.form.currency,
          customerName: this.form.customerName,
          customerId: this.form.customerId,
          customerNo: this.form.customerNo,
          owner: this.form.owner,
          ownerId: this.form.ownerId,
          priceRecMail: this.form.priceRecMail,
          priceTerms: this.form.priceTerms,
        }
        await this.createDD(this.currentMainId);
        Object.assign(this.form, cache);
      }
    },
    async delSale(item, idx) {
      if(this.activeName === 'first'){
        this.form.detailList.splice(idx, 1)
        this.computedPrice();
      }else if(this.activeName === 'second'){
        this.form.billList.splice(idx, 1)
      }
    },
    delSaleMany() {
      this.selectGoodCache.forEach((cacheGood) => {
        let idx = this.form.detailList.findIndex((item) => item.goodsNo === cacheGood.goodsNo);
        this.form.detailList.splice(idx, 1);
      })
    },
    async saveSale(item) {
      if(this.activeName === 'first'){
        let result = await this.$httpN.postB('crm/orderdetail/save', item);
        if(!result) return
        if(!item.id) item.id = result.detailId;
        this.form.goodsPrice = result.goodsPrice;
        formUtil.submitSuccess('保存成功');
        item.isEdit = false;
      }else if(this.activeName === 'second'){
        if(item.billAmount === '') return this.$message.error('请输入金额');
        let result = await this.$httpN.postB('crm/orderbill/save', item);
        if(!result) return
        if(!item.id) item.id = result.id;
        item.billPercent = result.billPercent;
        formUtil.submitSuccess('保存成功');
        item.isEdit = false;
      }
    },
    handleSelectionChange(arr, row) {
      let idx = this.multipleSelection.findIndex((select) => {
        return select.id === row.id
      });
      if(idx > -1) {
        this.multipleSelection.splice(idx, 1)
      }else {
        this.multipleSelection.push(row);
      }
    },
    removeItem(idx) {
      this.form.contactList.splice(idx,1)
    },
    addItem(idx) {
      this.form.contactList.splice(idx+1, 0, {
        contactType: '',
        content: ''
      })
    },
    async createDD(mainOrderNo) {
      this.activeName = 'first';
      this.showForm = true;
      formUtil.resetData(this.form);
      if(mainOrderNo) {
        this.form.mainOrderNo = mainOrderNo;
        this.isCheckCache = this.isCheck
      }
      this.isCheck = false;
      this.accountList = [];
      this.form.ownerId = this.userInfo.dingId;
      this.form.owner = this.userInfo.realName;
      this.form.goodsPrice = 0;
      this.form.freightPrice = 0;
      this.form.bidPrice = 0;
      this.form.status = 0;
    },
    async getALLDict() {
      this.jgtk = await this.$httpN.postQ('crm/dict/list', {pid: '1295242288478629890'})
      this.lkxz = await this.$httpN.postQ('crm/dict/list', {pid: '1289141309633769473'})
      this.hkfs = await this.$httpN.postQ('crm/dict/list', {pid: '1303948419786883074'})
      this.currencyList = await this.$httpN.postQ('mpb/currency/list', {}, false);
      this.treeData = await this.$httpN.get('crm/productcategory/tree');
    },
    resetData() {
      formUtil.resetData(this.filterData)
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    delFile(idx){
      this.form.attachments.splice(idx, 1)
    },
    async uploadFile(e) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.mobileAlert('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          size: file.size,
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        $this.form.attachments.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;;
          }else if(res.data.code === 500) {
            $this.form.attachments.pop();
          }
        })
      })
      e.target.value = '';
    },
    selectDingUsers() {
      this.complexPicker(1, [], []).then(
        data => {
          this.form.ownerId = data[0].emplId;
          this.form.owner = data[0].name;
        }
      );
    },
    delMember() {
      this.form.owner = '';
      this.form.ownerId = '';
    },
    async saveForm() {
      delete this.form.statusChangeExplain;
      this.form.billList.forEach((item) => {
        if(item.billAmount === '') item.billAmount = 0;
      })
      if(!formUtil.verifyData(this.form, this.formVerify)) return;
      if(!await this.$httpN.postB('crm/order/save', this.form)) return;
      if(!this.form.mainOrderNo) this.showForm = false;
      formUtil.submitSuccess('保存成功');
      this.searchItem(true);
      if(this.form.mainOrderNo) this.editDD(this.form.mainOrderNo, this.isCheck, true);
    },
    async remoteMethod(query) {
      if (query !== '' && query.length >= 2) {
        this.loading = true;
        this.custormerList = await this.$httpN.postQ('mpb/customer/getByName', {name: query});
        this.loading = false;
      } else {
        this.custormerList = [];
      }
    },
    sizeChangeHandle(limit) {
      this.pageSize = limit;
      this.searchItem(true);
    },
    currentChangeHandle(page) {
      this.page = page;
      this.searchItem();
    },
    async searchItem(init) {
      if(init) this.page = 1;
      let data = await this.$httpN.postB('crm/order/list',{
        search: this.filterData.search,
        status: this.filterData.status,
        page: this.page,
        limit: this.pageSize,
      }, false)
      this.tableData = data.list;
      this.totalPage = data.totalCount;

      this.isInitSelect = true;
      this.$nextTick(() => {
        this.tableData.forEach(row => {
          this.multipleSelection.forEach((good) => {
            if(good.id === row.id) this.$refs.dataTable2.toggleRowSelection(row,true);
          })
        })
        this.isInitSelect = false;
      })
    },
    downloadTemplate() {
      var x = new XMLHttpRequest();
      x.open("GET", 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1300633776376778754.xls', true);
      x.responseType = 'blob';
      x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = '订单模板';
        a.click()
      }
      x.send();
    },
    async exportExcel() {
      let ids = this.multipleSelection.map(item => item.orderNo);
      let name = this.multipleSelection[0].orderNo + '-' + this.multipleSelection[0].customerName + '-' + this.multipleSelection[0].quoteDate
      let data = await this.$httpN.get('crm/order/export1Order', {
        orderNo: ids.join(','),
      }, 'blob')

      this.downFile(data, `${name}.xls`);
    },
    async exportExcel2() {
      let ids = this.multipleSelection.map(item => item.orderNo);
      let name = this.multipleSelection[0].orderNo + '-' + this.multipleSelection[0].customerName + '-' + this.multipleSelection[0].quoteDate
      let data = await this.$httpN.get('crm/order/exportContract', {
        orderNo: ids.join(','),
      }, 'blob')

      this.downFile(data, `${name}.xls`);
    },
    downFile(blob, fileName) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .header{
    position: relative;
    padding: 10px 0 0 20px ;
    .filter{
      cursor: pointer;
      float: right;
      margin-right: 30px;
      line-height: 30px;
      img{
        width: 16px;
        margin-right: 3px;
      }
    }
    .mask{
      position: fixed;
      height: 100vh;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 3;
    }
    .filter-wrapper{
      position: absolute;
      width: 315px;
      padding-bottom: 20px;
      background: white;
      top: 48px;
      right: 20px;
      z-index: 99;
      border-radius: 5px;
      box-shadow: 0 0 3px black;
      .filter-header{
        line-height: 40px;
        padding-left: 16px;
        border-bottom: 1px solid #DDD;
        margin-bottom: 20px;
      }
      .filter-arrow{
        width:12px;
        height:12px;
        position: absolute;
        top: -7px;
        right: 20px;
        box-shadow: 0 0 3px black;
        transform: rotate(45deg);
      }
      .filter-white{
        width:18px;
        height:18px;
        position: absolute;
        top: -2px;
        right: 17px;
        border-radius: 3px;
        background: white;
      }
    }
  }
  .data-wrapper{
    padding: 0 20px;
    margin-top: 10px;
  }
  .select-btn{
    display: inline-block;
    font-weight: normal;
    margin-right: 5px;
    width: 80px;
    height: 28px;
    border-radius: 30px;
    background: #FAFAFA;
    border: 1px solid #ECECEC;
    position: relative;
    line-height: 28px;
    color: #7982A7;
    font-size: 12px;
    text-align: center;
    position: relative;
    cursor: pointer;
    .del{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 30px;
      color: white;
      text-align: center;
      background:rgba(130, 130, 130, 0.9);
      display: none;
    }
    &:hover{
      .del{
        display: block;
      }
    }
  }
  .fileitem{
    line-height: 32px;
    margin-bottom: 5px;
    background: #F5F5F5;
    width: 474px;
    padding-left:15px;
    font-size: 12px;
    .uploadtip{
      float:right;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .addfilebtn{
    cursor: pointer;
    color: #909399;
    display: block;
    font-weight: normal;
  }
  .tree-header{
    display: flex;
    .left-header{
      width: 250px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      background: #f5f7fa;
      text-align: center;
      border: 1px solid #ebeef5;
      border-bottom:none;
      font-weight: bold;
      border-right: none;
    }
    .right-header{
      padding-left: 15px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      border: 1px solid #ebeef5;
      flex: 1;
      font-weight: bold;
      border-bottom:none;
    }
  }
  .tree-wrapper{
    display: flex;
    .good-class{
      width: 250px;
      overflow:auto;
      border: 1px solid #ebeef5;
      padding: 5px;
      border-right: none;
    }
    .good-list{
      border: 1px solid #ebeef5;
      overflow:hidden;
      flex: 1;
      border-top: none;
      p{
        padding-left: 15px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-weight: bold;
        margin: 0;
        border-right: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;

      }

    }
  }
</style>
